<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性和方法-$set</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="case10-demo1">
    姓名：{{user.name}}<br>
    年龄：{{user.age}}<br>
    性别：{{user.sex}}<br>
    身高：{{user.height}}<br>
    体重：{{user.wight}}
    <button v-on:click="add">身高</button>
</div>
<script type="text/javascript">
    var case10Demo1=new Vue({
        el:"#case10-demo1",
        data:{
            user:{
                name:"slsher",
                age:10
            }
        },
        mounted(){//--钩子函数，实例挂载之后
            this.user.sex="男"
        },
        beforeMount(){// ——钩子函数，实例挂载之前
            this.user.sex="男"
        },
        methods:{
            add:function () {
                this.$set(this.user,"height","1.75m")
            }
        }
    })
    // 示例：vm.$set(vm.obj, "name", "Fan")     //obj是一个对象
    case10Demo1.$set(case10Demo1.user,"name","slsher1")
    Vue.set(case10Demo1.user,"wight","130")
    console.log(case10Demo1.$data)

</script>
</body>
</html>